<template>
  <div>
    <template v-if="!lookflag">
      <el-select
          v-loading="selLoading"
          class="w-100"
          v-model="selectValue"
          :placeholder="placeholder"
          :clearable="false"
          style="width: 240px"
          size="mini"
          ref="mySelect"
          :reserve-keyword="true"
          :disabled="disabled"
          filterable
          popper-class="sele"
          :filter-method="filter"
          @change="fun"
          @focus="funx"
          @blur="funb"
          @visible-change="hidden"
          clearable
      >
        <el-option
            v-for="(item, index) in options"
            :key="item.id"
            :label="item.name"
            remote
            :value="item.id"
            placeholder="请输入"
        >
        </el-option>

        <div style="bottom: -10px">
          <el-pagination
              v-if="pageModel.total > pageModel.limit"
              small
              @current-change="handleCurrentChange"
              :current-page="pageModel.pageIndex"
              :page-size="pageModel.limit"
              layout="prev, pager,next,total"
              :total="pageModel.total"
          >
          </el-pagination>
        </div>
      </el-select>
    </template>
    <template v-else
    >
      <div v-loading="selLoading">{{ showValue }}</div>
    </template
    >
  </div>
</template>


<style scoped lang="scss">
::v-deep .el-select-dropdown__wrap {
  height: 38px;
}

.w-100 {
  width: 100% !important;
}

.drop > > > .el-input__inner {
  background: #5183ff !important;
  color: white;
  border: none;
  height: 26px;
  padding: 10px 22px 10px 10px;
  text-align: center;
}

.drop {
  width: 250px;
}

.drop > > > .el-select .el-input .el-select__caret {
  display: none;
}
</style>


<script>
import debounce from "lodash/debounce";
import {getUserModuleApi} from "@/api/integrationOption/integrationOption.js";

export default {
  props: {
    searchKey: {
      type: String,
      default: "",
    },
    ruleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: String,
    value: {
      type: [String, Number],
    },
    itemObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lookflag: {
      type: Boolean,
      default: false,
    },
    idKey: {
      type: [Number, String],
      default: 0,
    },
    journalingType: {
      type: [String, Number],
      default: "subject",
    },
    apiInfo: {
      type: Object,
    },
    searchApiInfo: {
      type: Object,
    },
    prop: {
      type: Object,
      default: () => {
        return {
          label: "names",
          id: "codes",
        };
      },
    },
    foucus: {
      type: Boolean,
      default: true,
    },
    apiBody: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      pageModel: {
        total: 0,
        pageIndex: 1,
        limit: 10,
      },
      selLoading: false,
      showValue: "",
      lookLoading: false,
      options: [],
      tempObj: {},
    };
  },
  computed: {
    selectValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  created() {
    if (this.value) {
      this.searchKeyHandle()
    }
  },
  mounted() {
  },
  methods: {
    async searchKeyHandle() {
      const res = await getUserModuleApi({
        tl: "sysApplicationService",
        as: "application",
        dj: "getApp"
      }, {id: this.value})
      if (res.attribute) {
        this.options.push({...res.attribute})
      }

    },
    // 页码改变事件
    handleCurrentChange(val) {
      this.pageModel.pageIndex = val;
      this.getUserModuleHandle();
    },
    // select选中更改事件
    fun(val) {
      let tempObj = this.options.find(item => {
        if (val === item.id) {
          return item
        }
      })
      this.$emit(`onSelect`, val, tempObj);

      this.$nextTick(() => {
        this.$emit("blur");
      });
    },
    searchShowValue(val) {
      this.options.forEach((item) => {
        if (item.codes == val) {
          this.showValue = item.names;
          this.$nextTick(() => {
            this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
          });
        }
      });
    },
    // 获得焦点
    funx() {
      if (this.foucus) {
        this.getUserModuleHandle();
      }
    },
    clearOptions() {
      if (this.options.length) {
        this.pageModel.pageIndex = 1;
        this.options = [];
        this.tempObj = null;
      }
    },
    // 失去焦点
    funb() {
      // this.$nextTick(() => {
      //   this.$emit("blur");
      // });
    },
    hidden(val) {
      if (!val) {
        this.$nextTick(() => {
          this.$emit("blur");
        });
      }
    },
    //搜索方法,将符合的数据存入options中，并分页展示
    filter: debounce(function (val) {
      this.pageModel.pageIndex = 1;
      this.getUserModuleHandle(val);
    }, 300),
    focus() {
      this.$refs.mySelect.focus();
    },
    async getUserModuleHandle(val = null, obj = null) {
      const res = await getUserModuleApi({
        tl: "sysApplicationService",
        as: "application",
        dj: "queryApp"
      }, {
        pageNum: this.pageModel.pageIndex,
        pageSize: this.pageModel.limit,
        name: val,
      })
      console.log(res, 'newselect')
      this.pageModel.total = res.attribute.total;
      this.options = res.attribute.list
    },
    async searchCodes(codes) {
    },
  },
  beforeDestroy() {
  },
  //监听来自父组件的数据，当数据更新时，重置展示
  watch: {
    // value(newv, oldv) {
    //   if (this.lookflag) {
    //     this.searchCodes(this.value);
    //   }
    //   if (!oldv && newv) {
    //     this.searchCodes(this.value);
    //   }
    // },
  },
};
</script>
